<template>
  <div class='directReply'>
    <el-dialog title="回复消息" :visible.sync="isShow" center :before-close="close">
      <el-card  class='messagebox'>
          <div class="orderInfo" v-if='order'>
            <el-collapse v-model="activeNames" >
              <el-collapse-item name="1">
                <template slot="title">
                  <span class='orderInfo_title'>订单信息</span>
                </template>
                <!-- 国知局前订单 -->
                <ul v-if="isOrder">
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>订单编号：</span><span>{{order.order_number}}</span>
                      </el-col>
                      <el-col :span="12">
                        <span class='label'>拟申报专利名称：</span><span>{{order.patent_name}}</span>
                      </el-col>
                    </el-row>
                  </li>
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>订单状态：</span><span>{{order.status}}</span>
                      </el-col>
                      <el-col :span="12">
                        <span class='label'>订单类型：</span><span>{{order.type}}</span>
                      </el-col>
                    </el-row>
                  </li>
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>联系电话：</span><span>{{replyUser.phone}}</span>
                      </el-col>
                    </el-row>
                  </li>
                </ul>

                <!-- 国知局后订单 -->
                <ul v-else>
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>订单编号：</span><span>{{order.order_number}}</span>
                      </el-col>
                      <el-col :span="12">
                        <span class='label'>案件名称：</span><span>{{order.name}}</span>
                      </el-col>
                    </el-row>
                  </li>
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>订单状态：</span><span>{{order.status}}</span>
                      </el-col>
                      <el-col :span="12">
                        <span class='label'>订单类型：</span><span>{{order.type | typeFilter}}</span>
                      </el-col>
                    </el-row>
                  </li>
                  <li>
                    <el-row>
                      <el-col :span="12">
                        <span class='label'>联系电话：</span><span>{{replyUser.phone}}</span>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>

        <div class="messagebox-content">
          <div v-for="(item, index) in messageData" :key="index" >
            <div class="item clearfloat" v-if="item.sendUser == 'send'">
              <!-- <template v-if="item.isOrder">
                <el-avatar :size="avatarSize" icon="el-icon-tickets"></el-avatar>
                <div class="item_message messageBackground_l order">
                  <ul>
                    <li><span class='item__label'>订单编号：</span><span>{{item.order_number}}</span></li>
                    <li><span class='item__label'>订单类型：</span><span>{{item.type | typeFilter}}</span></li>
                    <li><span class='item__label'>订单状态：</span><span>{{item.status}}</span></li>
                  </ul>
                </div>
              </template> -->
              <!-- <template v-else> -->
                <span class="item_time">{{item.created_at}}</span>
                <el-avatar :size="avatarSize">{{replyUser.name | getDirectDetailsName}}</el-avatar>
                <div class="item_message messageBackground_l">
                  <span>{{item.news}}</span>
                </div>
              <!-- </template> -->
            </div>
            <div v-if="item.sendUser == 'accept'" class="agent_item clearfloat">
              <!-- <span class="item_user fr">{{item.send_user.name}}</span> -->
              <el-avatar class='fr' :size="avatarSize">{{$store.state.user.name | getDirectDetailsName}}</el-avatar>
              <span class="item_time fr">{{item.created_at}}</span>
              <div class="item_message messageBackground_r fr">
                <span>{{item.news}}</span>
              </div>
            </div>
          </div>

        </div>

        <div class="clearfloat messagebox-reply">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="replyMessage"></el-input>
          <el-button class="fr mt10" type="primary" @click="submit()">发送</el-button>
          <!-- <el-button class="fr mt10 mr10" @click="resets ">重置</el-button> -->
        </div>
      </el-card >

    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      messageData: [],
      avatarSize: 35,
      replyMessage: '',
      replyUser: {

      },
      id: null,
      order_id: null,
      activeNames: '1',
      order: null,
      isOrder: true,
    }
  },
  watch: {
    messageData: {
      handler: function(val) {
        for(let i = 0; i < val.length; i++) {
          if (val[i].send_id == this.$store.state.user.id) {
            val[i].sendUser = 'accept'
          } else {
            val[i].sendUser = 'send'
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    show (data) {
      this.isShow = true
      this.id = data.id
      console.log(data)
      if (data.pid) {
        this.id = data.pid
      } else {
        this.id = data.id
      }
      this.getMessage(this.id)

    },
    getMessage(id) {
      let params = {
        news: id
      }
      this.$axios.get(`api/news/${id}/see_all_news`,{params: params}).then(res => {
        if (res.data.code == 200) {
          this.getOrderData(res.data)
          this.messageData = res.data.data
          this.replyUser = res.data.replyUser

          this.readMessage(id)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 发送消息
    submit () {
      if (this.replyMessage != '') {
        let params = {
          news: this.replyMessage,
          pid: this.id,
          receive_uid: this.replyUser.id,
        }
        if (this.isOrder) {
          this.order_id = this.order.id
          params.order_id = this.order.id
        } else {
          this.order_id = this.order.id
          params.finals_id = this.order.id
        }
        
        this.$axios.post('api/news/reply_pr_news',params).then(res => {
          if (res.data.code == 200) {
            this.getMessage(this.id)
            this.replyMessage = ''
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请输入回复内容'
        })
      }

    },
    // 读取消息
    readMessage(id) {
      // if ()
      let params = {
        pid: id
      }
      this.$axios.put(`api/news/set_pr_read`, params).then(res => {
        if (res.data.code == 200) {
          this.$emit('refresh')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    //处理订单信息
    getOrderData(data) {
      if (data.order) {
        this.order = data.order
      } else {
        if (data.final) {
          this.order = data.final
          this.isOrder = false
        }
      }
    },
    close() {
      this.messageData = []
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .directReply {
    .el-dialog {
      width: 900px;
      max-height: 800px;
      overflow-y: auto;
      margin-top: 5vh !important;
    }
    .messagebox {
      width: 100%;
      background: #eef1f3;
      .el-card__body {
        padding: 0;
      }
      &-content {
        padding: 20px;
        max-height: 350px;
        overflow-y: auto;
      }
      &-reply {
        padding: 20px;
      }
      .orderInfo {
        padding: 8px;
        width: 100%;
        &_title {
          font-size: 18px;
          margin-left: 20px;
          font-weight: bold;
        }
        ul {
          li {
            list-style: none;
            padding-left: 55px;
          }
        }
        .label {
          display: inline-block;
          width: 120px;
          font-weight: bold;
        }

      }
    }

    .messageBackground_l {
      background: #fff;
    }
    .messageBackground_r {
      background: #c9e7ff;
    }
    .el-avatar {
      background: #409EFF;
    }
    .item {
      width: 100%;
      margin-bottom: 10px;
      .item_user {
        display: inline-block;
        // width: 60px;
        max-width: 100px;
        font-size: 16px;
        font-weight: bold;
      }
      .item_message {
        max-width: calc(100% - 170px);
        display: inline-block;
        padding: 10px 15px;
        box-sizing: border-box;
        margin-left: 15px;
        border-radius: 5px;
        vertical-align: top;
        // margin-right: 90px;
      }
      .item_time {
        font-size: 12px;
        display: block;
        padding-left: 55px;
        margin-bottom: 5px;
        color: #ccc;
      }
      .deduction_message {
        margin: 20px 0 0 80px;
        max-width: calc(100% - 170px);
        padding: 10px 15px;
        border-radius: 5px;
      }
      .order {
        // margin-left: 55px;

        ul {
          li {
            list-style: none;
          }
        }
        .item__label {
          width: 100px;
          font-weight: bold;
        }
      }
    }
    .agent_item {
      width: 100%;
      margin-bottom: 10px;
      position: relative;
      box-sizing: border-box;
      padding-top: 20px;
      .item_user {
        display: inline-block;
        max-width: 100px;
        font-size: 16px;
        font-weight: bold;
      }
      .item_time {
        position: absolute;
        right: 60px;
        top: 0px;
        font-size: 12px;
        display: block;
        // padding-right: 80px;
        margin-bottom: 5px;
        color: #ccc;
      }
      .item_message {
        max-width: calc(100% - 170px);
        display: inline-block;
        padding: 10px 15px;
        box-sizing: border-box;
        margin-right: 20px;
        border-radius: 5px;
        vertical-align: top;
        // margin-left: 80px;
      }

    }
  }
</style>
